import React, { useEffect, useState } from "react";
import type { CollapseProps } from "antd";
import { Collapse } from "antd";
import UserCollectionItem from "./UserCollectionItem";
// import { getAuthorCollectionList } from "@/apis/userApi.ts";
import { useSelector } from "react-redux";
import { RootState } from "@/store";

const UserCollectionList: React.FC = () => {
  const [collectionItem, setCollectionItem] =
    useState<CollapseProps["items"]>();
  const userCollectionList = useSelector(
    (state: RootState) => state.UserInfoStore.userCollectionList
  );

  useEffect(() => {
    // 先清空一下，再重新渲染
    setCollectionItem(() => []);

    userCollectionList.forEach((folder) => {
      setCollectionItem((prev) => {
        return [
          ...(prev || []),
          {
            key: folder._id,
            label: folder.folderName,
            children: <UserCollectionItem collectItem={folder.collectItem} />,
          },
        ];
      });
    });
  }, [userCollectionList]);

  // const fetchCollectionList = async () => {
  //   const res = await getAuthorCollectionList();

  //   res.data?.forEach((item) => {
  //     setCollectionItem((prev) => {
  //       return [
  //         ...(prev || []),
  //         {
  //           key: item._id,
  //           label: item.folderName,
  //           children: <UserCollectionItem collectItem={item.collectItem} />,
  //         },
  //       ];
  //     });
  //   });
  // };

  // useEffect(() => {
  //   fetchCollectionList();
  // }, []);

  const onChange = (key: string | string[]) => {
    console.log(key);
  };

  return (
    // <div style={{ maxHeight: "400px", overflowY: "auto" }}>
    <div>
      <Collapse
        // items={userCollectionList}
        items={collectionItem}
        // defaultActiveKey={["0"]}
        onChange={onChange}
      />
    </div>
  );
};

export default UserCollectionList;
